*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #2d3436;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color: #fff;
}
.bt{
    padding: 20px 60px;
    border: 2px solid #00cec9;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.bt::before{
    background-color: #00cec9;
    content: '';
    /* 伪元素的背景的位置是相对于内容的位置,
    为了覆盖整个div,需要绝对定位重新设置位置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition: .6s;
}
.bt1::before{
    width: 0;
    height: 100%;
}
.bt2::before{
    width: 100%;
    height: 0;
}
.bt3::before{
    width: 100%;
    height: 0;
    transform:translate(-50%,-50%) rotate(17deg);
}
.bt4::before{
    width: 100%;
    height: 0;
    transform:translate(-50%,-50%) rotate(-17deg);
}
.bt:hover::before{
    width: 200%;
    height: 200%;
}

